import 'dart:async';

import 'package:Flutter/dotcon/entity/ble_device.dart';
import 'package:flutter/material.dart';

import '../custom_icon_button.dart';
import 'dialog_tip.dart';

class TutorialOverlay extends ModalRoute<void>{

  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.transparent;

  @override
  String get barrierLabel => "连接";

  @override
  bool get maintainState => false;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return ConnectWidget();
  }

  @override
  Widget buildTransitions(
      BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: SlideTransition(
        position: animation.drive(Tween(begin: Offset(-1.1,0), end: Offset.zero)),
        child: child,
      ),
    );
  }
}

class ConnectWidget extends StatefulWidget {
  ConnectWidget({super.key});

  List<BleDevice> scanDevice= [BleDevice("Dot-123456", "name",BleStatus.disconnect),BleDevice("Dot-234567", "name",BleStatus.connect)];
  AnimationController? _controller;
  Animation<double>? _animation;
  int time = 0;

  @override
  State<ConnectWidget> createState() => _ConnectWidgetState();
}

class _ConnectWidgetState extends State<ConnectWidget> with TickerProviderStateMixin{

  bool link = false;

  @override
  void dispose() {
    widget._controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    double top = MediaQuery.of(context).padding.top;

    widget._controller ??= AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..forward();

    widget._controller?.addListener(() {
      if(widget._controller?.status == AnimationStatus.completed && widget.time++ < 5){
        widget._controller?.forward(from: 0.0);
      }
    });

    widget._animation ??= CurvedAnimation(
      parent: widget._controller!,
      curve: Curves.linear,
    );

    return Flex(
      direction: Axis.horizontal,
      children: <Widget>[
        Expanded(
            flex: 1,
            child:Stack(
                children: <Widget>[
                  const SizedBox(
                      width: double.infinity,
                      height: double.infinity,
                      child:DecoratedBox(
                        decoration: BoxDecoration(color: Color(0xFF111218)),
                      )
                  ),
                  Positioned(
                      child: ListView.separated(
                        padding: EdgeInsets.fromLTRB(20, 140+top , 20, 20),
                        itemCount: widget.scanDevice.length,
                        itemBuilder: (BuildContext context, int index) {
                          return Row(
                              children: <Widget>[
                                Expanded(
                                  child: Text("${widget.scanDevice[index].device}", textAlign: TextAlign.left, style: Theme.of(context).textTheme.bodyText1),
                                ),
                                CustomIconSwitch(
                                  onPressed: (b){
                                    var device = widget.scanDevice[index];
                                    device.status = !b ? BleStatus.connect : BleStatus.disconnect;
                                    setState((){
                                      widget.scanDevice[index] = device;
                                    });
                                    CustomDialog.showListDialog(context,"连接中......");
                                    Timer.periodic( const Duration(seconds: 3), (timer) {
                                      Navigator.of(context).pop(false);
                                      CustomDialog.showListDialog(context,"连接成功");
                                      Timer.periodic( const Duration(seconds: 3), (timer) {
                                        Navigator.of(context).pop(false);
                                      });
                                    });
                                  },
                                  image: AssetImage("images/connect__on_1.png"),
                                  unselectImage: AssetImage("images/connect_off_1.png"),
                                  width: 46,
                                  height: 25,
                                  state: widget.scanDevice[index].status == BleStatus.connect,
                                  alignment: Alignment.center,
                                )
                              ]
                          );
                        },
                        separatorBuilder: (BuildContext context, int index) => const Divider(height: 40,color: Colors.transparent,),
                      )
                  ),
                  ConstrainedBox(
                      constraints:BoxConstraints(
                        maxWidth: double.infinity,
                        maxHeight: 100 + top,
                      ),
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(0,top,0,0),
                        child: Stack(
                            alignment: Alignment.centerLeft,
                            children: [
                              const SizedBox(
                                  width: double.infinity,
                                  height: double.infinity,
                                  child:DecoratedBox(
                                    decoration: BoxDecoration(color: Color(0xFF0A0B11)),
                                  )
                              ),
                              Positioned(
                                  left: 18.0,
                                  child:Text(
                                      "设备连接" ,
                                      style: TextStyle(
                                          inherit: false,
                                          color: Colors.white,
                                          fontSize: 20
                                      )
                                  )
                              ),
                              Positioned(
                                  right: 18.0,
                                  bottom: 30.0,
                                  child:RotationTransition(
                                      turns: widget._animation!,
                                      child: CustomIconButton(
                                          onPressed: () {
                                            setState((){
                                              widget.time = 0;
                                              widget._controller?.forward(from: 0.0);
                                            });
                                          },
                                          width: 40,
                                          height: 40,
                                          image: AssetImage("images/connect_refreshes_1.png")
                                      )
                                  )
                              )
                            ]
                        ),
                      )
                  ),
                  Positioned(left: 20, bottom: 30,
                      child: CustomIconBackgroundSwitch(
                          onPressed: (bool value) {
                            setState(() {
                              link = true;
                            });
                          },
                          image: AssetImage("images/device_16x16.png"),
                          backImage: AssetImage("images/device_16x16_frame.png"),
                          width: 80,
                          height: 80,
                          state: link,
                          alignment: Alignment.center)
                  ),
                  Positioned(right: 20, bottom: 30,
                      child: CustomIconBackgroundSwitch(
                          onPressed: (bool value) {
                            setState(() {
                              link = false;
                            });
                          },
                          image: AssetImage("images/device_8x32.png"),
                          backImage: AssetImage("images/device_8x32_frame.png"),
                          width: 147,
                          height: 76,
                          state: !link,
                          alignment: Alignment.center)
                  )
                ]
            )
        ),
        Listener(
          onPointerDown: (_){
            Navigator.of(context).pop();
          },
          child: SizedBox(
            width: 100,
            height: double.infinity,
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.transparent),
            ),
          ),
        )
      ],
    );
  }

}
